@extends('Layouts.iframe')

@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计管理 <span class="c-gray en">&gt;</span> 折线图 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

    <div class="page-container">
        <div id="map-content">
            <ul>
                <li class="bgc1">
                    <div>{{ $arr['todayApply'] }}</div>
                    <p>今日申请数</p>
                    {{--<a href="javascript:;">更多 <i></i></a>--}}
                </li>
                <li class="bgc2">
                    <div>{{ $arr['todaySuccess'] }}</div>
                    <p>今日放款数</p>
                    {{--<a href="javascript:;">更多 <i></i></a>--}}
                </li>
                <li class="bgc3">
                    <div>{{ $arr['totalApply'] }}</div>
                    <p>总申请数</p>
                    {{--<a href="javascript:;">更多 <i></i></a>--}}
                </li>
                <li class="bgc4">
                    <div>{{ $arr['totalSuccess'] }}</div>
                    <p>总放款数</p>
                    {{--<a href="javascript:;">更多 <i></i></a>--}}
                </li>
            </ul>
        </div>
        <div id="container" style="height:400px"></div>
    </div>
 
@section('js')

    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="/js/lib/highcharts.js"></script>
    <script type="text/javascript" src="/js/lib/exporting.js"></script>
    <script type="text/javascript">
        var json = '';
        $(function () {
            $.ajax({
                type: 'post',
                url: "{{ url('admin/statistics') }}",
                dataType: "json",
                async:false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    json = res;
                }
            })
            Highcharts.chart('container', {
                title: {
                    text: '数据统计',
                    x: -20 //center
                },
                subtitle: {
                    text: '来源:收单系统',
                    x: -20
                },
                xAxis: {
//                    categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
                    categories: json.date
                },
                yAxis: {
                    title: {
                        text: '人数 (/次)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '人'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: '申请',
//                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    data: json.list
                }, {
                    name: '放款',
//                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    data: json.success
                }, {
                    name: '失败',
//                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    data: json.fail
                }, {
                    name: '总数',
//                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    data: json.total
                }]
            });
        });
    </script>
@endsection
@section('footer')
<footer class="footer mt-20">
    <div class="container">
            Copyright &copy;御顺金融<br>
    </div>
</footer>
<script type="text/javascript" src="/js/lib/jquery.min.js"></script>
<script type="text/javascript" src="/js/lib/H-ui.min.js"></script>
@endsection